import React, { useState } from 'react'
import { motion } from 'framer-motion'
import { 
  FileText, 
  Plus, 
  Download, 
  Upload, 
  BarChart3,
  Calendar,
  Filter,
  Search,
  Settings,
  Database,
  Target,
  CheckCircle,
  Clock,
  AlertTriangle,
  Eye,
  Edit,
  Trash2,
  Share2,
  Printer
} from 'lucide-react'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell } from 'recharts'

const ReportingMain = () => {
  const [activeTab, setActiveTab] = useState('overview')
  const [selectedStatus, setSelectedStatus] = useState('all')

  // Mock数据
  const reportData = {
    total: 45,
    completed: 38,
    inProgress: 5,
    pending: 2,
    completionRate: 84.4,
    change: '+12.5%',
    trend: 'up'
  }

  const statusData = [
    { name: '已完成', value: 38, color: '#10B981', percentage: 84.4 },
    { name: '进行中', value: 5, color: '#3B82F6', percentage: 11.1 },
    { name: '待处理', value: 2, color: '#F59E0B', percentage: 4.5 },
  ]

  const monthlyData = [
    { month: '1月', reports: 8, completed: 6, pending: 2 },
    { month: '2月', reports: 10, completed: 8, pending: 2 },
    { month: '3月', reports: 12, completed: 10, pending: 2 },
    { month: '4月', reports: 9, completed: 7, pending: 2 },
    { month: '5月', reports: 11, completed: 9, pending: 2 },
    { month: '6月', reports: 13, completed: 11, pending: 2 },
  ]

  const reportTemplates = [
    { id: 1, name: '碳足迹报告模板', type: 'carbon-footprint', category: 'environmental', usage: 15, lastUsed: '2024-03-25', status: 'active' },
    { id: 2, name: 'ESG评估报告模板', type: 'esg-assessment', category: 'overall', usage: 12, lastUsed: '2024-03-20', status: 'active' },
    { id: 3, name: '合规检查报告模板', type: 'compliance', category: 'governance', usage: 8, lastUsed: '2024-03-18', status: 'active' },
    { id: 4, name: '可持续发展报告模板', type: 'sustainability', category: 'overall', usage: 6, lastUsed: '2024-03-15', status: 'draft' },
    { id: 5, name: '供应链报告模板', type: 'supply-chain', category: 'social', usage: 4, lastUsed: '2024-03-10', status: 'active' },
  ]

  const recentReports = [
    { id: 1, title: '2024年第一季度碳足迹报告', type: 'carbon-footprint', status: 'completed', createdDate: '2024-03-31', author: '张三', downloads: 25, views: 156 },
    { id: 2, title: '2024年ESG评估报告', type: 'esg-assessment', status: 'completed', createdDate: '2024-03-25', author: '李四', downloads: 18, views: 89 },
    { id: 3, title: '合规检查月度报告', type: 'compliance', status: 'in-progress', createdDate: '2024-03-28', author: '王五', downloads: 0, views: 12 },
    { id: 4, title: '可持续发展年度报告', type: 'sustainability', status: 'pending', createdDate: '2024-03-30', author: '赵六', downloads: 0, views: 5 },
    { id: 5, title: '供应链碳足迹报告', type: 'supply-chain', status: 'completed', createdDate: '2024-03-22', author: '张三', downloads: 12, views: 67 },
  ]

  const scheduledReports = [
    { id: 1, title: '2024年第二季度碳足迹报告', type: 'carbon-footprint', schedule: '2024-06-30', frequency: 'quarterly', status: 'scheduled', recipients: 8 },
    { id: 2, title: 'ESG评估月度报告', type: 'esg-assessment', schedule: '2024-04-30', frequency: 'monthly', status: 'scheduled', recipients: 12 },
    { id: 3, title: '合规检查周报', type: 'compliance', schedule: '2024-04-07', frequency: 'weekly', status: 'scheduled', recipients: 5 },
  ]

  const tabs = [
    { id: 'overview', name: '概览', icon: BarChart3 },
    { id: 'templates', name: '模板', icon: FileText },
    { id: 'scheduled', name: '计划', icon: Calendar },
    { id: 'settings', name: '设置', icon: Settings },
  ]

  const getStatusColor = (status) => {
    switch (status) {
      case 'completed': return 'text-green-600 bg-green-50'
      case 'in-progress': return 'text-blue-600 bg-blue-50'
      case 'pending': return 'text-yellow-600 bg-yellow-50'
      case 'scheduled': return 'text-purple-600 bg-purple-50'
      case 'draft': return 'text-gray-600 bg-gray-50'
      default: return 'text-gray-600 bg-gray-50'
    }
  }

  const getTypeColor = (type) => {
    switch (type) {
      case 'carbon-footprint': return 'text-green-600 bg-green-50'
      case 'esg-assessment': return 'text-blue-600 bg-blue-50'
      case 'compliance': return 'text-purple-600 bg-purple-50'
      case 'sustainability': return 'text-orange-600 bg-orange-50'
      case 'supply-chain': return 'text-indigo-600 bg-indigo-50'
      default: return 'text-gray-600 bg-gray-50'
    }
  }

  const getFrequencyColor = (frequency) => {
    switch (frequency) {
      case 'weekly': return 'text-red-600 bg-red-50'
      case 'monthly': return 'text-yellow-600 bg-yellow-50'
      case 'quarterly': return 'text-blue-600 bg-blue-50'
      case 'annual': return 'text-green-600 bg-green-50'
      default: return 'text-gray-600 bg-gray-50'
    }
  }

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">报告生成</h1>
          <p className="text-gray-600">自动化报告生成和模板管理</p>
        </div>
        <div className="flex items-center space-x-3">
          <button className="esg-button-secondary flex items-center">
            <Upload className="h-4 w-4 mr-2" />
            导入模板
          </button>
          <button className="esg-button-primary flex items-center">
            <Plus className="h-4 w-4 mr-2" />
            新建报告
          </button>
        </div>
      </div>

      {/* 标签页导航 */}
      <div className="border-b border-gray-200">
        <nav className="-mb-px flex space-x-8">
          {tabs.map((tab) => {
            const Icon = tab.icon
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`py-2 px-1 border-b-2 font-medium text-sm flex items-center ${
                  activeTab === tab.id
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                <Icon className="h-4 w-4 mr-2" />
                {tab.name}
              </button>
            )
          })}
        </nav>
      </div>

      {/* 概览内容 */}
      {activeTab === 'overview' && (
        <div className="space-y-6">
          {/* KPI卡片 */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              className="esg-card p-6"
            >
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">报告完成率</p>
                  <p className="text-2xl font-bold text-gray-900">
                    {reportData.completionRate}%
                  </p>
                </div>
                <div className="text-sm font-medium text-green-600">
                  {reportData.change}
                </div>
              </div>
              <div className="mt-4 flex items-center">
                <CheckCircle className="h-4 w-4 text-green-500 mr-1" />
                <span className="text-xs text-gray-500">较上月</span>
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
              className="esg-card p-6"
            >
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">已完成报告</p>
                  <p className="text-2xl font-bold text-gray-900">
                    {reportData.completed}
                  </p>
                </div>
                <div className="text-sm font-medium text-green-600">+8</div>
              </div>
              <div className="mt-4 flex items-center">
                <CheckCircle className="h-4 w-4 text-green-500 mr-1" />
                <span className="text-xs text-gray-500">本月完成</span>
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
              className="esg-card p-6"
            >
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">进行中报告</p>
                  <p className="text-2xl font-bold text-gray-900">
                    {reportData.inProgress}
                  </p>
                </div>
                <div className="text-sm font-medium text-blue-600">+2</div>
              </div>
              <div className="mt-4 flex items-center">
                <Clock className="h-4 w-4 text-blue-500 mr-1" />
                <span className="text-xs text-gray-500">正在处理</span>
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.3 }}
              className="esg-card p-6"
            >
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">报告模板</p>
                  <p className="text-2xl font-bold text-gray-900">12</p>
                </div>
                <div className="text-sm font-medium text-purple-600">+3</div>
              </div>
              <div className="mt-4 flex items-center">
                <FileText className="h-4 w-4 text-purple-500 mr-1" />
                <span className="text-xs text-gray-500">可用模板</span>
              </div>
            </motion.div>
          </div>

          {/* 图表区域 */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* 月度报告趋势 */}
            <div className="esg-card p-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">月度报告趋势</h3>
              <ResponsiveContainer width="100%" height={300}>
                <BarChart data={monthlyData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="month" />
                  <YAxis />
                  <Tooltip />
                  <Bar dataKey="reports" fill="#3B82F6" name="总报告数" />
                  <Bar dataKey="completed" fill="#10B981" name="已完成" />
                </BarChart>
              </ResponsiveContainer>
            </div>

            {/* 报告状态分布 */}
            <div className="esg-card p-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">报告状态分布</h3>
              <ResponsiveContainer width="100%" height={300}>
                <PieChart>
                  <Pie
                    data={statusData}
                    cx="50%"
                    cy="50%"
                    innerRadius={60}
                    outerRadius={100}
                    paddingAngle={5}
                    dataKey="value"
                  >
                    {statusData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Pie>
                  <Tooltip />
                </PieChart>
              </ResponsiveContainer>
              <div className="mt-4 space-y-2">
                {statusData.map((item) => (
                  <div key={item.name} className="flex items-center justify-between">
                    <div className="flex items-center">
                      <div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: item.color }}></div>
                      <span className="text-sm text-gray-600">{item.name}</span>
                    </div>
                    <span className="text-sm font-medium text-gray-900">{item.percentage}%</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* 最近报告和模板 */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* 最近报告 */}
            <div className="esg-card p-6">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-semibold text-gray-900">最近报告</h3>
                <button className="text-sm text-blue-600 hover:text-blue-700 font-medium">
                  查看全部
                </button>
              </div>
              <div className="space-y-4 max-h-80 overflow-y-auto">
                {recentReports.map((report) => (
                  <div key={report.id} className="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
                    <div className="flex-1">
                      <h4 className="font-medium text-gray-900">{report.title}</h4>
                      <div className="flex items-center space-x-2 mt-1">
                        <span className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(report.status)}`}>
                          {report.status === 'completed' ? '已完成' : report.status === 'in-progress' ? '进行中' : '待处理'}
                        </span>
                        <span className={`px-2 py-1 text-xs font-medium rounded-full ${getTypeColor(report.type)}`}>
                          {report.type === 'carbon-footprint' ? '碳足迹' : report.type === 'esg-assessment' ? 'ESG评估' : report.type === 'compliance' ? '合规' : report.type === 'sustainability' ? '可持续发展' : '供应链'}
                        </span>
                      </div>
                      <div className="flex items-center space-x-4 mt-2 text-xs text-gray-500">
                        <span>作者: {report.author}</span>
                        <span>创建: {report.createdDate}</span>
                      </div>
                    </div>
                    <div className="flex items-center space-x-2">
                      <div className="text-right">
                        <p className="text-sm font-medium text-gray-900">{report.downloads}</p>
                        <p className="text-xs text-gray-500">下载</p>
                      </div>
                      <div className="text-right">
                        <p className="text-sm font-medium text-gray-900">{report.views}</p>
                        <p className="text-xs text-gray-500">查看</p>
                      </div>
                      <div className="flex items-center space-x-1">
                        <button className="p-1 text-gray-400 hover:text-gray-600">
                          <Eye className="h-4 w-4" />
                        </button>
                        <button className="p-1 text-gray-400 hover:text-gray-600">
                          <Download className="h-4 w-4" />
                        </button>
                        <button className="p-1 text-gray-400 hover:text-gray-600">
                          <Share2 className="h-4 w-4" />
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* 报告模板 */}
            <div className="esg-card p-6">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-semibold text-gray-900">报告模板</h3>
                <button className="text-sm text-blue-600 hover:text-blue-700 font-medium">
                  管理模板
                </button>
              </div>
              <div className="space-y-4 max-h-80 overflow-y-auto">
                {reportTemplates.map((template) => (
                  <div key={template.id} className="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
                    <div className="flex-1">
                      <h4 className="font-medium text-gray-900">{template.name}</h4>
                      <div className="flex items-center space-x-2 mt-1">
                        <span className={`px-2 py-1 text-xs font-medium rounded-full ${getTypeColor(template.type)}`}>
                          {template.type === 'carbon-footprint' ? '碳足迹' : template.type === 'esg-assessment' ? 'ESG评估' : template.type === 'compliance' ? '合规' : template.type === 'sustainability' ? '可持续发展' : '供应链'}
                        </span>
                        <span className={`px-2 py-1 text-xs font-medium rounded-full ${template.status === 'active' ? 'text-green-600 bg-green-50' : 'text-gray-600 bg-gray-50'}`}>
                          {template.status === 'active' ? '活跃' : '草稿'}
                        </span>
                      </div>
                      <div className="flex items-center space-x-4 mt-2 text-xs text-gray-500">
                        <span>使用次数: {template.usage}</span>
                        <span>最后使用: {template.lastUsed}</span>
                      </div>
                    </div>
                    <div className="flex items-center space-x-1">
                      <button className="p-1 text-gray-400 hover:text-gray-600">
                        <Edit className="h-4 w-4" />
                      </button>
                      <button className="p-1 text-gray-400 hover:text-gray-600">
                        <Eye className="h-4 w-4" />
                      </button>
                      <button className="p-1 text-gray-400 hover:text-red-600">
                        <Trash2 className="h-4 w-4" />
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* 计划报告 */}
          <div className="esg-card p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold text-gray-900">计划报告</h3>
              <button className="text-sm text-blue-600 hover:text-blue-700 font-medium">
                管理计划
              </button>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {scheduledReports.map((report) => (
                <div key={report.id} className="p-4 border border-gray-200 rounded-lg">
                  <div className="flex items-start justify-between mb-2">
                    <h4 className="font-medium text-gray-900">{report.title}</h4>
                    <span className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(report.status)}`}>
                      {report.status === 'scheduled' ? '已计划' : '待计划'}
                    </span>
                  </div>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-500">计划时间:</span>
                      <span className="font-medium">{report.schedule}</span>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-500">频率:</span>
                      <span className={`px-2 py-1 text-xs font-medium rounded-full ${getFrequencyColor(report.frequency)}`}>
                        {report.frequency === 'weekly' ? '每周' : report.frequency === 'monthly' ? '每月' : report.frequency === 'quarterly' ? '每季度' : '每年'}
                      </span>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-500">接收人:</span>
                      <span className="font-medium">{report.recipients}人</span>
                    </div>
                  </div>
                  <div className="flex items-center space-x-2 mt-3">
                    <button className="flex-1 text-xs text-blue-600 hover:text-blue-700 font-medium">
                      编辑
                    </button>
                    <button className="flex-1 text-xs text-gray-600 hover:text-gray-700 font-medium">
                      暂停
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* 其他标签页内容可以在这里添加 */}
      {activeTab !== 'overview' && (
        <div className="esg-card p-12 text-center">
          <h3 className="text-lg font-semibold text-gray-900 mb-2">{tabs.find(t => t.id === activeTab)?.name}功能</h3>
          <p className="text-gray-600">该功能正在开发中，敬请期待...</p>
        </div>
      )}
    </div>
  )
}

export default ReportingMain 